/*
 * @Author: skj
 * @Date: 2018-11-15 09:56:35
 * @LastEditors: chenhaibo
 * @LastEditTime: 2019-07-14 13:33:20
 * @Description:
 */
import React, {Component} from 'react';
import {View, StyleSheet, ViewPropTypes, Text} from 'react-native';
import Line from '../items/item-line/index';
import {Button} from 'react-native-elements';
import PropTypes from 'prop-types';
import Device from "@greens/device/src/device";

export default class BottomButtons extends Component {

    constructor(props) {
        super(props)
    }

    render() {
        return (
            this.props.buttonNums == 1 ?
                <SingleButton
                    containerStyle = {this.props.containerStyle}
                    singleTitleStyle={this.props.singleTitleStyle}
                    singleTitle={this.props.singleTitle}
                    singleButtonStyle={this.props.singleButtonStyle}
                    onPressSingle={this.props.onPressSingle}
                    disabled={this.props.disabled}
                    disabledStyle={this.props.disabledStyle}
                /> :
                <DoubleButtons
                    containerStyle = {this.props.containerStyle}
                    leftTitle={this.props.leftTitle}
                    leftTitleStyle={this.props.leftTitleStyle}
                    leftButtonStyle={this.props.leftButtonStyle}
                    onPressLeftBtn={this.props.onPressLeftBtn}
                    rightTitle={this.props.rightTitle}
                    rightButtonStyle={this.props.rightButtonStyle}
                    rightTitleStyle={this.props.rightTitleStyle}
                    onPressRightBtn={this.props.onPressRightBtn}
                    leftDisable={this.props.leftDisable}
                    rightDisable={this.props.rightDisable}
                    leftDisableStyle={this.props.leftButtonStyle}
                    rightDisableStyle={this.props.rightDisableStyle}
                />
        );
    }
}
BottomButtons.propTypes = {
    containerStyle:ViewPropTypes.style,
    //按钮个数
    buttonNums: PropTypes.number,
    //单个按钮
    singleTitle: PropTypes.string,
    singleTitleStyle: PropTypes.any,
    singleButtonStyle: ViewPropTypes.style,
    onPressSingle: PropTypes.func,
    disabled: PropTypes.bool,
    disabledStyle: ViewPropTypes.style,
    //双按钮
    leftTitle: PropTypes.string,
    leftTitleStyle: Text.propTypes.style,
    leftButtonStyle: ViewPropTypes.style,
    onPressLeftBtn: PropTypes.func,
    leftDisable: PropTypes.bool,
    leftDisableStyle: ViewPropTypes.style,

    rightTitle: PropTypes.string,
    rightTitleStyle: Text.propTypes.style,
    rightButtonStyle: ViewPropTypes.style,
    onPressRightBtn: PropTypes.func,
    rightDisable: PropTypes.bool,
    rightDisableStyle: ViewPropTypes.style,

}
BottomButtons.defaultProps = {
    buttonNums: 1,
    singleTitle: '单个button',
    leftTitle: '左侧button',
    rightTitle: '右侧button'
}

class DoubleButtons extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isCanClickDoubleLeftBtn: true,
            isCanClickDoubleRightBtn: true,
        }
    }

    render() {
        return (
            <View style={[{position: 'absolute', bottom: 0},this.props.containerStyle]}>
                <Line leftMargin={0}/>
                <View style={doubleButtonStyles.container}>
                    <Button title={this.props.leftTitle}
                            onPress={() => {
                                if (this.state.isCanClickDoubleLeftBtn) {
                                    this.state.isCanClickDoubleLeftBtn = false;
                                    this.props.onPressLeftBtn && this.props.onPressLeftBtn()
                                    setTimeout(() => {
                                        this.state.isCanClickDoubleLeftBtn = true;
                                    }, 800);
                                }
                            }}
                            buttonStyle={[doubleButtonStyles.buttonStyle, doubleButtonStyles.leftButtonStyle, this.props.leftButtonStyle]}
                            containerViewStyle={doubleButtonStyles.leftContinerStyle}
                            titleStyle={[doubleButtonStyles.leftTitleStyle, this.props.leftTitleStyle]}
                            disabledStyle={[doubleButtonStyles.disableButtonStyle, this.props.leftDisableStyle]}
                            disabled={this.props.leftDisable}
                    />
                    <Button title={this.props.rightTitle}
                            onPress={() => {
                                if (this.state.isCanClickDoubleRightBtn) {
                                    this.state.isCanClickDoubleRightBtn = false;
                                    this.props.onPressRightBtn && this.props.onPressRightBtn()
                                    setTimeout(() => {
                                        this.state.isCanClickDoubleRightBtn = true;
                                    }, 800);
                                }
                            }}
                            buttonStyle={[doubleButtonStyles.buttonStyle, doubleButtonStyles.rightButtonStyle, this.props.rightButtonStyle]}
                            containerViewStyle={doubleButtonStyles.rightContinerStyle}
                            titleStyle={[doubleButtonStyles.rightTitleStyle, this.props.rightTitleStyle]}
                            disabledStyle={[doubleButtonStyles.disableButtonStyle, this.props.rightDisableStyle]}
                            disabled={this.props.rightDisable}
                    />
                </View>
            </View>
        )
    }
}

const doubleButtonStyles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        backgroundColor: '#ffffff',
        width: Device.SCREEN_WIDTH,
        height: Device.BOTTOM_BUTTON_CONTINER_HEIGHT
    },
    leftButtonStyle: {
        width: Device.SCREEN_WIDTH / 2 - 22.5,
        backgroundColor: '#FFFFFF',
        marginLeft: 15,
        marginRight: 7,
        borderColor: '#E83C36',
        borderWidth: 0.5
    },
    leftContinerStyle: {
        marginLeft: 0,
        width: Device.SCREEN_WIDTH / 2.0,
        marginRight: 0
    },
    rightContinerStyle: {
        marginLeft: 0,
        marginRight: 0,
        width: Device.SCREEN_WIDTH / 2.0
    },
    rightButtonStyle: {
        width: Device.SCREEN_WIDTH / 2 - 22.5,
        backgroundColor: '#E83C36',
        marginLeft: 8,
        marginRight: 15
    },
    buttonStyle: {
        marginTop: 10,
        backgroundColor: '#E83C36',
        height: Device.BOTTOM_BUTTON_HEIGHT + 1,
        borderRadius: 5
    },
    leftTitleStyle: {
        fontSize: 15,
        color: '#E83C36'
    },
    rightTitleStyle: {
        fontSize: 15,
        color: '#fff'
    },
    disableButtonStyle: {
        backgroundColor: '#c5c4c4',
        borderWidth: 0
    }
});

class SingleButton extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isCanClickSingleBtn: true
        }
    }

    render() {
        return (
            <View style={[{position: 'absolute', bottom: 0},this.props.containerStyle]}>
                <Line leftMargin={0}/>
                <View style={SingleButtonStyles.container}>
                    <Button
                        disabled={this.props.disabled}
                        title={this.props.singleTitle}
                        disabledStyle={[SingleButtonStyles.disableStyle,this.props.disabledStyle]}
                        disabledTitleStyle={SingleButtonStyles.disabledTitleStyle}
                        onPress={() => {
                            if (this.state.isCanClickSingleBtn) {
                                this.state.isCanClickSingleBtn = false;
                                this.props.onPressSingle && this.props.onPressSingle();
                                setTimeout(() => {
                                    this.state.isCanClickSingleBtn = true;
                                }, 800);
                            }
                        }}
                        buttonStyle={[SingleButtonStyles.buttonStyle, this.props.singleButtonStyle]}
                        titleStyle={[SingleButtonStyles.titleStyle, this.props.singleTitleStyle]}
                    />
                </View>
            </View>
        );
    }
}

const SingleButtonStyles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        width: Device.SCREEN_WIDTH,
        height: Device.BOTTOM_BUTTON_CONTINER_HEIGHT,
        alignItems: 'center'
    },
    buttonStyle: {
        marginTop: 10,
        backgroundColor: '#E83C36',
        height: Device.BOTTOM_BUTTON_HEIGHT,
        width: Device.SCREEN_WIDTH - 20,
        borderColor: 'transparent',
        borderRadius: 5,
        borderWidth: 0
    },
    titleStyle: {
        fontSize: 15,
        color: '#FFFFFF'
    },
    disableStyle: {
        backgroundColor: '#E83C36',
        opacity:0.7
    },
    disabledTitleStyle: {
        color: '#FFFFFF'
    }
});
